<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('博客分类列表')"/>
    <style>
        /*.layui-unselect{width: 30px;}*/
    </style>
</head>
<body class="pear-container">
<div class="layui-collapse">
    <div class="layui-colla-item">
        <div class="layui-colla-title">查询</div>
        <div class="layui-colla-content layui-show">
            <div class="layui-card">
                <div class="layui-card-body layui-bzw-table">
                    <form action="" class="layui-form" lay-filter="user-query-form">
                        <div class="layui-form-item">
                            <div class="layui-form-item layui-inline">
                                <div class="layui-input-inline layui-form-group">
                                    <select name="SearchTimeType" id="SearchTimeType" style="width:100px;">
                                        <option value="0">创建时间</option>
                                        <option value="1">更新时间</option>
                                    </select>
                                    <input type="text" class="layui-input layui-input-inline" id="SearchTimeBegin"
                                           placeholder="yyyy-MM-dd" readonly style="width:130px;"/>
                                    <input type="text" class="layui-input layui-input-inline" id="SearchTimeEnd"
                                           placeholder="yyyy-MM-dd" readonly style="width:130px;"/>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <div class="layui-input-inline layui-form-group">
                                    <select id="SearchName" name="SearchName">
                                        <!--                            <option value="All">全部</option>-->
                                        <option value="id">id</option>
                                        <option value="title">标题</option>
                                        <option value="CreateUser">创建人</option>
                                        <option value="UpdateUser">更新人</option>
                                    </select>
                                    <input type="text" id="SearchValue" name="SearchValue" placeholder=""
                                           class="layui-input layui-form-group-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <!--                <div class="layui-input-inline">-->
                                <!--                    <select id="selSearchKey">-->
                                <!--                        <option>标题</option>-->
                                <!--                        <option>编号</option>-->
                                <!--                    </select>-->
                                <!--                </div>-->
                                <!--                    <label class="layui-form-label">关键字</label>-->
                                <!--                    <div class="layui-input-inline">-->
                                <!--                        <input class="layui-input" name="searchValue" placeholder="查询关键字" type="text">-->
                                <!--                        &lt;!&ndash;                </div>&ndash;&gt;-->
                                <!--                        &lt;!&ndash;                <div class="layui-input-inline">&ndash;&gt;-->
                                <!--                    </div>-->
                                <button class="pear-btn pear-btn-md pear-btn-primary" lay-filter="class-query"
                                        lay-submit>
                                    <i class="layui-icon layui-icon-search"></i>
                                    查询
                                </button>
                                <button class="pear-btn pear-btn-md" type="reset">
                                    <i class="layui-icon layui-icon-refresh"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space5" style="height: 100%">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body">
                <div style="overflow: auto">
                    <ul id="leftTree" class="dtree">
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="class-table"></table>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="hidParentId" value="-1"/>

<script type="text/html" id="class-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <!--    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">-->
    <!--        <i class="layui-icon layui-icon-delete"></i>-->
    <!--        删除-->
    <!--    </button>-->
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="clearCache">
        <i class="layui-icon layui-icon-add-1"></i>
        清除缓存
    </button>
</script>
<script id="action-bar" type="text/html">
    <button sec:authorize="hasPermission(#vars.ActionGUID,'edit')"
            class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>
    </button>
    <button sec:authorize="hasPermission(#vars.ActionGUID,'remove')"
            class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i>
    </button>
</script>
</body>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    let listUrl = '[(${@htmlHelper.actionGuid("list")})]';
    let addUrl = '[(${@htmlHelper.actionGuid("add")})]';
    let editUrl = '[(${@htmlHelper.actionGuid("edit")})]';
    let clearCacheUrl = '[(${@htmlHelper.actionGuid("clearCache")})]';
    let removeUrl = '[(${@htmlHelper.actionGuid("remove")})]';
    let leftTreeUrl = '[(${@htmlHelper.actionGuid("tree")})]';
</script>
<script>
    layui.use(['form', 'table', 'treetable', 'popup', 'dtree', 'laydate'], function () {
        let MODULE_PATH = contextPath + "/article/class/";

        let $ = layui.jquery;
        let form = layui.form;
        let table = layui.table;
        let treetable = layui.treetable;
        //let popup = layui.popup;
        let dtree = layui.dtree;
        let laydate = layui.laydate;

        //***********************************************************函数定义 ******************************************//
        let getQueryParams = function () {
            return {
                SearchTimeType: $("#SearchTimeType").val(),
                SearchTimeBegin: $("#SearchTimeBegin").val(),
                SearchTimeEnd: $("#SearchTimeEnd").val(),

                SearchName: $("#SearchName").val(),
                SearchValue: $("#SearchValue").val(),

                SearchParentId: $("#hidParentId").val()
            };
        }
        let loadLeftList = function () {
            let dTree = dtree.render({
                elem: "#leftTree",
                initLevel: "1", //默认展开层级为1
                line: true, // 有线树
                dataStyle: "layuiStyle",
                ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
                icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
                method: 'get',
                url: ctreatLeftTreeLink(createLink(leftTreeUrl), TableName),
                response: {
                    statusName: "code", //返回标识（必填）
                    statusCode: 0, //返回码（必填）
                    message: "msg", //返回信息（必填）
                    rootName: "data", //根节点名称（必填）
                    treeId: "id", //节点ID（必填）
                    //parentId: "parentId", //父节点ID（必填）
                    title: "text", //节点名称（必填）
                },
                // 树加载完成后调用
                success: function (data, $ul, first) {
                    if (data != null && data.length > 0) {
                        //let tmpData = [{ "value": -1, "name": '请选择', "children": result.data }];
                        //return { 'code': 0, 'msg': '', 'data': tmpData }; // dataStyle: "layuiStyle" 返回的格式为这个
                        //let tmpData = { "value": -1, "name": '请选择' };
                        //result.data.unshift(tmpData);
                        return {'code': 0, 'msg': '', 'data': data}; // dataStyle: "layuiStyle" 返回的格式为这个
                    }
                },
                done: function (res, $ul, first) {
                    //console.log(22222);
                }
            });
        }

        let getList = function () {
            table.render({
                skin: 'line',
                method: "POST",
                toolbar: '#class-toolbar',
                elem: '#class-table',
                //url: MODULE_PATH + 'list',
                url: createLink(listUrl),
                //where: {SearchParentID: nodeId},
                where: getQueryParams(),
                //contentType:'application/json',
                page: true,
                defaultToolbar: [{
                    //这里可以自定义按钮
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                    title: '刷新'
                }, 'filter', 'print', 'exports'//筛选，打印，导出
                ],
                cols: [
                    [
                        //{field: 'id', title: 'id'},
                        {field: 'title', title: '名称'},
                        {field: 'classLevel', title: '级别'},
                        {field: 'sort', title: '排序'},
                        {title: '操作', templet: '#action-bar', width: 150, align: 'center'}
                    ]
                ]
            });
        }

        let add = function () {
            layer.open({
                type: 2,
                title: '新增账号',
                shade: 0.1,
                area: ['550px', '410px'],
                content: createLink(addUrl)
            });
        }

        let edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['550px', '410px'],
                content: createLink(editUrl) + "&id=" + obj.data['id']
            });
        }

        let refresh = function () {
            table.reload('class-table');
        }

        let clearCache = function () {
            reqAjax(createLink(clearCacheUrl), null, 'delete', refresh);
        }

        let remove = function (obj) {
            layer.confirm('确定要删除该记录', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                //reqAjax(createLink(removeUrl) + '&id='+ obj.data['id'], null, 'delete', refresh);
                reqAjax(createLink(removeUrl) + '**' + obj.data['id'] + '**', null, 'delete', refresh);
                // let loading = layer.load();
                // $.ajax({
                //     url: MODULE_PATH + "remove/" + obj.data['id'],
                //     dataType: 'json',
                //     type: 'delete',
                //     success: function (result) {
                //         layer.close(loading);
                //         if (result.success) {
                //             popup.success(result.msg, function () {
                //                 obj.del();
                //             })
                //         } else {
                //             popup.failure(result.msg);
                //         }
                //     }
                // })
            });
        }

        let btnSearch = function (q) {
            //table.renderData('organization-table');
            if (q == null)
                q = getQueryParams();
            table.reloadData('class-table', {
                where: q, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                //scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                // …
                //height: 2000 // 高度  --- 属性设置无效，因不属于数据相关属性
                page: {
                    curr: 1
                }
            });

            //table.reload('organization-table', {
            //	where: window.getQueryParams(), // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
            //	//scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
            //	// …
            //	//height: 2000 // 高度  --- 属性设置无效，因不属于数据相关属性
            //});
        }

        //清空重置数据
        // let clearSearch= function() {
        //     setTimeout(function () {
        //         //初始化组织架构默认值
        //         dtree.dataInit("treeOrganization", "0");
        //         treeOrganization.selectVal("0");
        //         //初始化角色默认值
        //         treeRole.dataInit("0");
        //         treeRole.selectVal("0");
        //         //初始化城市下拉默认值
        //         citySelectTree.dataInit("1");
        //         citySelectTree.selectVal("1");
        //
        //     }, 100);
        // }

        //******************************************************组件初始化 ********************************************************//

        /**开始时间 */
        laydate.render({
            elem: '#SearchTimeBegin',
            type: 'datetime',
            ready: function (date) {
                this.dateTime.hours = 0;
                this.dateTime.minutes = 0;
                this.dateTime.seconds = 0;
            }
        });

        /**截止时间 */
        laydate.render({
            elem: '#SearchTimeEnd',
            type: 'datetime',
            ready: function (date) {
                this.dateTime.hours = 23;
                this.dateTime.minutes = 59;
                this.dateTime.seconds = 59;
            }
        });

        //**********************************************方法调用 *******************************//

        loadLeftList();

        getList();
        //*********************************************事件触发 **********************************************//
        dtree.on("node('leftTree')", function (obj) {
            console.log(obj.param); // 点击当前节点传递的参数
            console.log(obj.dom); // 当前节点的jquery对象
            console.log(obj.childParams); // 当前节点的所有子节点参数
            console.log(obj.parentParam); // 当前节点的父节点参数
            //getList(obj.param.nodeId);
            $("#hidParentId").val(obj.param.nodeId);
            getList();
        });

        table.on('toolbar(class-table)', function (obj) {
            if (obj.event === 'add') {
                add();
            } else if (obj.event === 'refresh') {
                refresh();
            } else if (obj.event === 'batchRemove') {
                //window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#class-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#class-table");
            } else if (obj.event === 'clearCache') {
                clearCache();
            }
        });

        //监控数据行的事件， tool就表示是数据行1
        //参考： https://layui.org.cn/demo/table/toolbar.html
        table.on('tool(class-table)', function (obj) {
            if (obj.event === 'remove') {
                remove(obj);
            } else if (obj.event === 'edit') {
                edit(obj);
            }
        });

        //顶部查询提交
        form.on('submit(class-query)', function (data) {
            console.log(data)
            //treetable.search("#class-table", data.field.searchValue)
            btnSearch();
            return false;
        });

        //判断浏览器大小方法
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 1200) {
                return 3;   //大屏幕
            } else if (width > 992) {
                return 2;   //中屏幕
            } else if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }

        //
        // // 设置 select 组件宽度为200px
        // form.render('select');
        // form.initSelect('select', {
        //     width: 20
        // }, 'selSearchKey');
    });
</script>
</html>